<script setup>
import { onMounted } from 'vue'

defineProps({
  item: {
    required: true,
    type: Object
  },
  mode: {
    required: true,
    type: String
  }
})
// onMounted(() => {
//   console.log(item)
// })
</script>

<template>
  <div v-if="mode === 'normal'" class="card">
    <van-card
      class="goods-item"
      :price="item.goods_price_min"
      :origin-price="item.goods_price_min"
      :desc="'已售' + item.goods_sales + '件'"
      :title="item.goods_name"
      :thumb="item.goods_image"
      :centered="false"
    >
    </van-card>
  </div>
  <div v-else-if="mode === 'order'" class="order-card">
    <van-card
      :num="item.total_num"
      :price="item.total_pay_price"
      :title="item.goods_name"
      :thumb="item.goods_image"
    >
    </van-card>
  </div>

  <div v-else class="card">
    <van-card
      class="goods-item"
      :price="item.goods.goods_price_min"
      :title="item.goods.goods_name"
      :thumb="item.goods.goods_image"
      :centered="false"
    >
      <!-- 选择框 -->
      <template #tags>
        <slot name="tags"></slot>
      </template>
      <!-- 计数器 -->
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </van-card>
  </div>
</template>

<style lang="less">
.card {
  background-color: #fff !important;
  .goods-item {
    width: 100%;
    max-height: 125px;
    background-color: #fff !important;
    text-align: left;

    .van-card__title {
      font-weight: normal;
      margin-bottom: 5px;
      font-size: 14px;
    }
    .van-card__price {
      color: red;
      margin-right: 5px;
    }
    .van-checkbox {
      transform: translateX(-105px) translateY(55px) !important;
    }
  }
}
</style>
